<template>
    <el-container class="app-page">
        <el-header>
            <el-menu :default-active="activeIndex" mode="horizontal" :router="true">
                <el-menu-item index="source" route="/source">资源管理</el-menu-item>
                <el-menu-item index="config" route="/config">配置中心</el-menu-item>
            </el-menu>
        </el-header>
        <router-view class="router-view-first"></router-view>
    </el-container>
</template>
<script setup lang="ts">
import {jStorage} from 'jzutil';
import {ref} from 'vue';

import {useRouter, useRoute} from 'vue-router';
const router = useRouter();
const route = useRoute();
const activeIndex = ref('source');
activeIndex.value = route.path.split('/')[1] || 'source';
(() => {
    if (route.path === '/') {
        router.replace(`/source/${jStorage.getSession('crtSourcePath')}`);
    }
})();
</script>

<style scoped lang="less">
.app-page {
    width: 100%;
    height: 100%;
}
.el-aside {
    height: 100%;
}
.el-menu {
    height: 100%;
    width: 40%;
}
.router-page {
    width: 100%;
    height: calc(100% - 80px);
}
.el-menu.el-menu--horizontal {
    border-bottom: 0 none;
}
.el-header {
    height: 60px;
    border-bottom: 1px solid #d3d3d3;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
}
.el-menu-item {
    user-select: none;
}
.router-view {
    width: calc(100% - 200px);
    height: 100%;
    /* padding: 0; */
}
.nav-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.router-view-first {
    width: 100%;
    height: calc(100% - 60px);
}
</style>
